<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../css/common.css" />
		<style>
			p {
				margin: 6px 0;
			}
			.mui-ellipsis-2 {
				text-indent: 6px;
				color: #333333;
			}
			
			i.iconfont {
				margin: 0 5px;
				color: #FEB406;
				font-size: 18px;
			}
			
			span.mui-pull-right {
				color: #333333;
				font-size: 12px;
			}
			
			.mui-popover#notice-info p {
				word-wrap: break-word;
				margin: 0 15px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-back mui-icon-left-nav mui-pull-left"></a>
			<a class="mui-pull-right">发布通告</a>
			<h1 class="mui-title">通告</h1>
		</header>
		<div class="mui-content">
			<div id="notice_list">
				<ul class="mui-table-view" id="noticelist">
					<!--<li class="mui-table-view-cell mui-media">
						<div class="mui-slider-right mui-disabled">
							<a class="mui-btn btn-main delete">删除</a>
						</div>
						<div class="mui-slider-handle">
							<div class="mui-media-body">
								<p class="notice-detail mui-ellipsis-2"></p>
								<p class="mui-ellipsis"><i class="iconfont">&#xe62c;</i></p>
								<span class="mui-pull-right"></span>
							</div>
						</div>
					</li>-->
				</ul>
			</div>
			<div id="notice-info" class="mui-popover pop-up">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<h5 class="min-title">通告详情</h5>
						<p></p>
					</div>
				</div>
			</div>
		</div>

		<script src="../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/common.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/user.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var timearr = [];
			mui('.mui-scroll-wrapper').scroll();
			var noticeList = document.getElementById("noticelist");
			mui.plusReady(function() {
				getData();
				function getData() {
					var url = baseURL + 'mySelf/announce.json';
					Common.ajax({
						url : url
					}, function(data) {
						noticeList.innerHTML = '';
						console.log(JSON.stringify(data));
						if(data.code == 1) {
							var data = data.result;
							if(data.length) {
								for(var i = 0; i < data.length; i++) {
									createNoticeList(data[i].aid, data[i].releaseTime, data[i].beginTime, data[i].endTime, data[i].content);
									timearr[i] = [MyGetTime(data[i].beginTime), MyGetTime(data[i].endTime)];
								}
							} else {
								Common.showState(noticeList, '&#xe608;', '你还没有发布过通告', 50);
							}
						}
					}, function(xhr) {
						Common.linkError();
						console.error('failed - ' + xhr.status + ' : ' + xhr.statusText);
					})
				}
				
				document.addEventListener('reload', function() {
					getData();
				})
			})
			
			//字符串转换成时间戳函数
			function MyGetTime(timestr) {
				var newstr = timestr.replace(/\./g, '/');
				var date = new Date(newstr);
				var time_str = date.getTime().toString();
				return time_str;
			}

			/**
			 * 通告列表
			 * @param {Object} aid			通告id
			 * @param {Object} releaseTime	发布时间
			 * @param {Object} beginTime	开始时间
			 * @param {Object} endTime		结束时间
			 * @param {Object} content		通告详情
			 */
			function createNoticeList(aid, releaseTime, beginTime, endTime, content) {
				var item = document.createElement('li');
				item.className = 'mui-table-view-cell mui-media';
				item.id = aid;
				var str = '<div class="mui-slider-right mui-disabled"><a class="mui-btn btn-main delete">删除</a></div>';
				str += '<div class="mui-slider-handle"><div class="mui-media-body">';
				str += '<p class="notice-detail mui-ellipsis-2">' + content + '</p>';
				str += '<p class="mui-ellipsis"><i class="iconfont">&#xe67d;</i>' + beginTime + ' 至 ' + endTime + '</p>';
				str += '<span class="mui-pull-right">' + releaseTime + '</span>';
				item.innerHTML = str;
				noticeList.appendChild(item);
			}
			
			// 发布通告
			mui('.mui-bar').on('tap', '.mui-pull-right', function() {
				Common.openWindow('release-notice.html', { timearr: timearr });
			}); 
			
			// 通告详情
			mui(noticeList).on('tap', '.mui-table-view-cell', function() {
				$("#notice-info p").text($(this).find('.mui-ellipsis-2').text());
				mui('#notice-info').popover('toggle');
			})

			// 通告侧滑
			mui(noticeList).on('tap', '.mui-btn', function() {
				var thisId = $(this).parents('li')[0].id;
				plus.nativeUI.confirm("确认删除此通告？", function(e) {
					if(!e.index) {
						var url = baseURL + 'mySelf/cancelAnnounce/' + thisId + '.json';
						console.log(url);
						Common.ajax({
							url : url
						}, function(data) {
							console.log(JSON.stringify(data));
							if(data.code == 1) {
								mui.toast('操作成功');
								mui.swipeoutClose($("li.mui-selected")[0]);
								plus.webview.currentWebview().reload();
							} else {
								mui.toast('操作失败，请稍后再试');
								mui.swipeoutClose($("li.mui-selected")[0]);
							}
						}, function(xhr) {
							mui.toast('网络异常，请稍后再试');
							console.error('failed - ' + xhr.status + ' : ' + xhr.statusText);
						})
					} else {
						mui.swipeoutClose($("li.mui-selected")[0]);
					}
				}, '删除通告', ["确定", "取消"]);
			});

			// 点击外部自动收起
			mui(document).on('tap', 'html', function() {
				mui.swipeoutClose($("li.mui-selected")[0]);
			})
		</script>
	</body>

</html>